<template>
	<div class="topPanel">
		<div class="-goback" @click="com.goBack()"></div>
		<div class="appTitle">章鱼借阅</div>
	</div>
	<div class="block-header">
		<image class="-block-header-img" src="../static/images/block-header.png"></image>
	</div>
	<div style="margin:30px;">
		<!-- 表单 -->
		<div class="text-bold" style="margin-bottom: 20px;">修改个人信息</div>


		<div v-if="userData.avator || userData.avator==''" class="userAvatar" @tap="getImageAndUpload"
			:style="'background-image:url(\''+userData.avator+'\');'"></div>

		<div v-if="userData.member_name || userData.member_name==''" class="d-flex a-center userNickname">
			<div>昵称：</div>
			<div>
				<input v-model="userData.member_nickname" class="uni-input" placeholder="请输入昵称"></input>
			</div>
		</div>


		<!-- 提交按钮 -->
		<view class="text-center -p-bottom">
			<div class="btn" @click="updateUserData">提交修改</div>
		</view>
	</div>
</template>

<script>
	import com from '../common/index.js'
	export default {
		data() {
			return {
				com: com,
				userData: {},
				keys: ""
			}
		},
		onLoad() {
			const that = this
			const keys = uni.getStorageSync('uToken')
			if (keys) {
				this.keys = keys
				com.getUser(keys, (e) => {
					console.log(e)
					if (e == '266') {
						that.needLogin = true
						return
					}
					this.userData = e
				})
			}
		},
		methods: {
			// 修改图片和昵称
			updateUserData() {
				const that = this
				if (!that.userData.avator || !that.userData.member_nickname || that.userData.avator === '' || that.userData
					.member_nickname === '') {
					uni.showToast({
						title: "请设置图片和昵称",
						icon: 'error'
					})
					return
				}
				const data = {
					member_avatar: that.userData.avator,
					member_nickname: that.userData.member_nickname,
					key: that.keys
				}
				uni.showLoading({
					title:"请稍等"
				})
				uni.request({
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: data,
					url: that.com.serviceURL + '/cmobile/index.php?app=borrowing_info&mod=editUserInfo',
					success: (res) => {
						uni.hideLoading({
							noConflict: true
						})
						const data = res.data
						//console.log(res)
						if (data.state !== 200) {
							uni.showToast({
								title: "保存失败",
								icon: "fail"
							})
							return
						}
						that.com.goBack()
					}
				})
			},
			// 裁剪和上传图片
			async getImageAndUpload() {
				const that = this
				try {
					const chooseImageRes = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					});

					const tempFilePaths = chooseImageRes.tempFilePaths;
					if (tempFilePaths.length === 0) {
						throw new Error('没有选择图片');
					}

					const imgPath = tempFilePaths[0];

					const cropImageRes = await wx.cropImage({
						src: imgPath, // 图片路径
						cropScale: '1:1', // 裁剪比例   微信官方提供了多种裁剪比例以供选择
						success: e => {
							uni.showLoading({
								title:"请稍等"
							})
							const cropImgPath = e.tempFilePath
							wx.uploadFile({
								url: that.com.serviceURL +
									'/cmobile/index.php?app=borrowing_info&mod=uploadPic', // 你的服务器接口地址
								filePath: cropImgPath,
								name: 'upimg',
								header: {
									'Content-Type': 'multipart/form-data'
								},
								formData: {
									upimg: cropImgPath,
									key: that.keys,
									name: 'upimg'
								},
								success: res => {
									uni.hideLoading({
										noConflict: true
									})
									const data = JSON.parse(res.data)
									if (data.code !== 200) {
										uni.showToast({
											title: "上传图片失败",
											icon: 'error'
										})
										return
									}
									that.userData.avator = data.datas.img_url
									uni.showToast({
										title: "上传成功",
										icon: "success"
									})
								}
							})
						}
					});

				} catch (error) {
					// 错误处理
					console.error(error);
					throw error;
				}
			}
		}
	}
</script>

<style>
	.userAvatar {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		width: 150px;
		height: 150px;
		margin: 50px auto 10px auto;
		border-radius: 1.3ex;
	}

	.userAvatar:before {
		content: "点击修改";
		display: block;
		text-align: center;
		font-size: small;
		padding-top: calc(100% - 30px);
		color: white;
		text-shadow: 0 0 1px black;
	}

	.userNickname {
		padding: 10px;
		background-color: #f7f7f7;
		margin-top: 30px;
		border-radius: 1.3ex;
	}
</style>